<template>
  <div class="goods">
      <div class="top top1">
          <div  class=" top1-t1">编号: {{goodsSku}}</div>
          <div  class=" top1-t2">发布时间：{{pushTime}}</div>
      </div>
      <div class="top top2">
          <div   class="top2-l">
            <div class="top2-l-content">
              <img src="../../assets/imgs/goods/pig1.png" alt="">
            </div>
          </div>
          <div   class="top2-r">
              <div class="row1">
                  <div class="row1-1">下载</div>
                  <div class="row1-2">收藏</div>
              </div>
              <div class="row2">
                 素材信息{{goodsSku}} 的素材信息
              </div>
              <div  class="row3">
                版权说明
              </div>
          </div>
      </div>
      <div class="top top3">
        <div class="title">相似作品</div>
        <div class="z-list">
          <div class="z-list-item" v-for="(item , index ) in goodList" :key="index">
            <goods-com-item  :detail="item"  @on-click-item="handleJump">
              {{item}}
            </goods-com-item>
          </div>

        </div>
      </div>
  </div>
</template>

<script lang="ts" setup >

const route = useRoute();
const router = useRouter();
// 当前页面的Id
const pageId = route.params.id
console.log('路由',pageId)
// 点击详情跳转新的商品页面
const handleJump = (id:number|string)=>{
   navigateTo(`/goods/${id}`)
}


const state = reactive({
  // 商品编号
  goodsSku: pageId,
  pushTime:'2022-08-01',
  goodList:[
    {
      id:1112233,
      imgUrl:'sdsddds',
      title:'描述信息等描述信息等描述信息等描述信息等',
      type:'1',
    },    {
      id:1112255,
      imgUrl:'sdsddds',
      title:'描述信息等描述信息等描述信息等描述信息等',
      type:'2',
    },    {
      id:1112266,
      imgUrl:'sdsddds',
      title:'描述信息等描述信息等描述信息等描述信息等',
      type:'3',
    },    {
      id:1112277,
      imgUrl:'sdsddds',
      title:'描述信息等描述信息等描述信息等描述信息等',
      type:'4',
    }
    ,    {
      id:1112299,
      imgUrl:'sdsddds',
      title:'描述信息等描述信息等描述信息等描述信息等',
      type:'5',
    },    {
      id:1112237,
      imgUrl:'sdsddds',
      title:'描述信息等描述信息等描述信息等描述信息等',
      type:'6',
    }
  ]
})



const {  goodsSku ,pushTime , goodList } = toRefs(state)

</script>

<style lang="scss" scoped>
.goods{
  margin: 0 80px;
  height: 100%;
  .top{
    display: flex;
    flex-direction: row;
  }
  .top1{
    padding: 10px 0;
    font-size: 12px;
    .top1-t2{
      margin-left: 16px;
    }
  }
  .top2{
    justify-content: space-between;
    box-sizing: border-box;
    .top2-l{
      background-color: #fff;
      width: 60%;
      height: 500px;
      padding: 8px;
      .top2-l-content{
        width: 100%;
        height: 100%;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .top2-r{
      margin-left: 20px;
      width: 40%;
      .row1{
        display: flex;
        flex-direction: row;
        height: 44px;
        box-sizing: border-box;
        text-align: center;
        background-color: #fff;
        padding: 10px;
        .row1-1{
          width: 50%;
          height: 100%;
          font-size: 14px;
          line-height: 24px;
          background-color: #ccc;
        }
        .row1-2{
          width: 50%;
          font-size: 14px;
          line-height: 24px;
          height:  100%;
          margin-left: 10px;
          background-color: #ccc;
        }
      }
      .row2{
        width: 100%;
        margin-top: 10px;
        min-height: 200px;
        background-color: #fff;
        padding: 10px;
        font-size:12px ;

      }
      .row3{
        width: 100%;
        margin-top: 10px;
        min-height: 200px;
        background-color: #fff;
        padding: 10px;
        font-size:12px ;
      }
    }
  }
  .top3{
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    flex-direction: column;
    .title{
      font-size: 16px;
      font-weight: 500;
      padding-left: 10px;
      margin-top: 16px;
    }
    .z-list{
      padding: 10px;
      padding-right: 0px;
      width: 100%;
      box-sizing: border-box ;
      display: flex;
      flex-direction: row  ;
      justify-content: flex-start;
      flex-wrap: wrap;
      .z-list-item{
        width: 20%;
        height: 200px;
        padding-right: 10px;
        padding-top:10px;
      }
    }
  }
}

</style>
